<template>
    <div>   
        <el-card >
            <!-- <div slot="header">
                <h4>学校基础数据初始化</h4>
            </div> -->
           
            <el-steps :active="step" align-center class="step-p" process-status="wait">
                <el-step title="部门信息导入" description=""></el-step>
                <el-step title="教职工信息导入" description=""></el-step>
                <el-step title="学生&家长信息导入" description=""></el-step>
                <el-step title="学期信息创建" description=""></el-step>
            </el-steps>

            <div v-show="step == 1" class="init-tr">
                <div class="init-title middle">1、部门信息导入</div>
                <a href="static/template/deptTemplate.xlsx" download="部门信息.xlsx">
                    <el-button class="middle" type="primary" plain>下载模板</el-button>
                </a>
                
                <importDept class="import-p"></importDept>
            </div>

            <div  v-show="step == 2" class="init-tr">
                <div class="init-title middle">2、教职工信息导入 </div>
                <a href="static/template/teacherTemplate.xlsx" download="教职工信息.xlsx">
                    <el-button class="middle" type="primary" plain>下载模板</el-button>
                </a>
               
                <importTeacher class="import-p"></importTeacher>
            </div>

            <div  v-show="step == 3" class="init-tr">
                <div class="init-title middle">3、学生&家长信息导入</div>
                <a href="static/template/studentTemplate.xlsx" download="学生信息.xlsx">
                    <el-button class="middle" type="primary" plain>下载模板</el-button>
                </a>
                
                <importStudent class="import-p"></importStudent>
            </div>

            <div  v-show="step == 4" class="init-tr">
                <div class="init-title middle">4、学期信息创建</div>

                <el-form :inline="true" class="el-form">
                   
                    <el-form-item>
                        <el-button @click="addTerm" type="primary" >添加学期</el-button>
                    </el-form-item>
                </el-form>
            
                <el-table 
                    :data="termList"
                    border
                    
                    >
                    <!-- <el-table-column
                        label="学期信息"
                        align="center"
                   >
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.info" placeholder="请输入学期信息" style="border:none"></el-input>
                        </template>
                    </el-table-column> -->
                    <el-table-column
                   
                    label="学期名称"
                     align="center"
                    >
                         <template slot-scope="scope">
                           
                            <el-input v-model="scope.row.name" placeholder="请输入学期名称" style="border:none"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                   
                    label="开始日期"
                     align="center">
                         <template slot-scope="scope">
                           
                            <el-date-picker
                                v-model="scope.row.beginDate"
                                type="date"
                                placeholder="选择日期">
                            </el-date-picker>
                        </template>
                    </el-table-column>
                    <el-table-column
                    
                    label="结束日期"
                    align="center"
                   >
                         <template slot-scope="scope">
                           
                            <el-date-picker
                                v-model="scope.row.endDate"
                                type="date"
                                placeholder="选择日期">
                            </el-date-picker>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column
                  
                    label="是否为当前学期"
                     align="center"
                    >
                        <template slot-scope="scope">
                           
                            <el-switch v-model="scope.row.isCur" >
                            </el-switch>
                        </template>
                    </el-table-column> -->
                    <el-table-column
                   
                    label="操作"
                     align="center">
                         <template slot-scope="scope">
                             <el-button @click="deleteTerm(scope.$index)" type="text">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <div class="step-p">
                <el-button @click="prevStep" v-show="step > 1" type="primary">上一步</el-button>
                <el-button @click="nextStep" v-show="step < 4" type="primary">下一步</el-button>
                <el-button @click="submit" v-show="step == 4" type="success">提交学期信息</el-button>
            </div>

        </el-card>
        <div class="space"></div>

        <initLoadding :progress='progress' 
            :isOverDept='isOverDept' 
            :isOverTeacher='isOverTeacher' 
            :isOverStudent='isOverStudent' 
            :isOverTerm='isOverTerm' 
            :errList='errList'
        ></initLoadding>
    </div>
</template>
<script>

import initLoadding from './initLoadding'
import uuid from '@/util/uuid'
import {importDeptData, importTeacherData, importStudentData} from '@/util/map' 
import {importTerm} from '@/api/schoolApi'

import importDept from '@/components/import/importDept'
import importTeacher from '@/components/import/importTeacher'
import importStudent from '@/components/import/importStudent'
export default {
    components: {
        initLoadding, importDept, importTeacher, importStudent
    },
    computed: {
        schoolId () {
            return this.$store.state.common.cookiesObj.schoolId
        },
        deptFileList () {
            return this.$store.state.initSchool.deptFileList
        },
        deptList () {
            return this.$store.state.initSchool.deptList
        },
        teacherFileList () {
            return this.$store.state.initSchool.teacherFileList
        },
        teacherList () {
            return this.$store.state.initSchool.teacherList
        },
        studentFileList () {
            return this.$store.state.initSchool.studentFileList
        },
        studentList () {
            return this.$store.state.initSchool.studentList
        },
        deptWrongList () {
            return this.$store.getters['initSchool/deptWrongList']
        },
        teacherWrongList () {
            return this.$store.getters['initSchool/teacherWrongList']
        },
        studentWrongList () {
            return this.$store.getters['initSchool/studentWrongList']
        },
        modifyVisible () {
            return this.$store.state.initSchool.modifyVisible
        },
        termList () {
            return this.$store.state.initSchool.termList
        }
    },
    data () {
        return {
            step: 1,
            progress: 0,
            isOverDept: false,
            isOverTeacher: false,
            isOverStudent: false,
            isOverTerm: false,
            errList: []
        }
    },
    methods: {
        prevStep () {
            this.step--
        },
        nextStep () {
            this.step++
        },
        
        addTerm () {
            this.$store.commit('initSchool/addTerm', {
            
                    name: '',
                    beginDate: '',
                    endDate: ''
                    // isCur: false
            })
        },
        deleteTerm (index) {
            this.$store.commit('initSchool/deleteTerm', index)
        },
        exportDeptTemplate () {
            this.$store.dispatch('initSchool/exportDeptTemplate')
        },
        exportTeacherTemplate () {
            this.$store.dispatch('initSchool/exportTeacherTemplate')
        },
        exportStudentTemplate () {
            this.$store.dispatch('initSchool/exportStudentTemplate')
        },
 
        formateDate (date) {
            if (typeof date == 'string') {
                date = new Date(date)
            } 
            var year = date.getFullYear()
            var month = date.getMonth() + 1
            if (month < 10) {
                month = '0' + month
            }
            var d = date.getDate()
            d = d < 10 ? '0' + d : d
            var hour = date.getHours()
            hour = hour < 10 ? '0' + hour : hour
            var minute = date.getMinutes()
            minute = minute < 10 ? '0' + minute : minute
            var sec = date.getSeconds()
            sec = sec < 10 ? '0' + sec : sec
            return year + '-' + month + '-' + d + ' ' + hour + ':' + minute + ':' + sec
        },

        async importTerm (list) {
            for (var item of list) {
                item.beginDate = this.formateDate(item.beginDate)
                item.endDate = this.formateDate(item.endDate)
            }
            var params = {
                schoolId: this.schoolId,
                body: list
            }
            var res = await importTerm(params)
            return res
        },
      
        async submit () {
            for (var item of this.termList) {
                if (!item.name) {
                    this.$message.error('请填写学期名称')
                    return false
                }
                if (!item.beginDate) {
                    this.$message.error('请填写学期开始时间')
                    return false
                }
                if (!item.endDate) {
                    this.$message.error('请填写学期结束时间')
                    return false
                }
            }
            try {
                var res = await this.importTerm(this.termList)

                this.$message.success(res.message)
            } catch (error) {
                
            }
        }
    }
}
</script>
<style scoped>
.step-p{margin: 0 0 30px 0;}
.init-tr{margin: 0 0px 30px 0;}
.init-title{padding: 0 50px 0 0;font-size: 20px;}
.middle{display: inline-block;vertical-align: middle;}
.init-file-p{padding: 30px 0 0 0;}
.sel-file-name{display: inline-block;vertical-align: middle;padding: 0 30px 0 0px;}
.el-alert{margin: 20px 0;}
.space{height: 40px;}
.step-p{text-align: center;padding: 30px 0;}
.el-form{padding: 20px 0 0 0;}
.table-header{color: #000;}
.file-tag{display: inline-block;vertical-align: middle;margin: 10px;}
.import-p{padding: 30px 0 0 0;}
</style>
